<template>
  <div class="carousel-container">
    <v-carousel cycle>
      <v-carousel-item
        v-for="(item, i) in items"
        :key="i"
        :max-width="maxWidth"
      >
        <img :src="imgPath + item.image" :alt="item.src" width="1500px" />
      </v-carousel-item>
    </v-carousel>
  </div>
</template>

<script>
import { getCarouselListApi } from '@/api/carousel'
import { imgPath } from '@/utils/const'
export default {
  name: 'CarouselH',
  props: {
    maxWidth: {
      type: Number
    }
  },

  data() {
    return {
      listLoading: true,
      imgPath: imgPath,
      items: [
        {
          src: require('@/assets/img/WechatIMG42.jpeg')
        },
        {
          src: require('@/assets/img/WechatIMG42.jpeg')
        },
        {
          src: require('@/assets/img/WechatIMG42.jpeg')
        },
        {
          src: require('@/assets/img/WechatIMG42.jpeg')
        },
        {
          src: require('@/assets/img/WechatIMG42.jpeg')
        }
      ]
    }
  },
  created() {
    this.getCategory()
  },
  methods: {
    getCategory() {
      console.log('get')
      this.listLoading = true
      getCarouselListApi().then((response) => {
        this.items = response.data.data
        console.log(response)
        this.listLoading = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
.carousel-container {
  margin-bottom: 20px;
}
</style>
